<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>XXX管理</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/css/index.css">
    <style>
        .demo-table-expand {
            font-size: 0;
        }
        .demo-table-expand label {
            width: 90px;
            color: #99a9bf;
        }
        .demo-table-expand .el-form-item {
            margin-right: 0;
            margin-bottom: 0;
            width: 50%;
        }
    </style>
</head>
<body>
<div id="app">
    <!--数据展示-->
    <el-table
            :data="tableData"
            border
            style="width: 100%">
        <el-table-column
                prop="checkId"
                label="盘点编号"
                width="80">
        </el-table-column>
        <el-table-column
                prop="ckauditor"
                label="盘点审核人"
                width="180">
        </el-table-column>
        <el-table-column
                prop="storesName.storesName"
                label="门店名称"
                width="120">
        </el-table-column>
        <el-table-column
                prop="checkname"
                label="盘点人"
                width="120">
        </el-table-column>
        <el-table-column
                prop="checkdate"
                label="盘点日期"
                width="120">
        </el-table-column>

        <el-table-column
                prop="auditordate"
                label="审核日期"
                width="120">
        </el-table-column>
        <el-table-column
                prop="states"
                label="状态"
                width="160">
        </el-table-column>
        <el-table-column
                prop=""
                label="审核操作"
                width="">
            <template slot-scope="scope">

                <el-button type="success" @click="state1(scope.row.checkId,1)">审核通过</el-button>
                <el-button type="danger" @click="state1(scope.row.checkId,2)">不通过</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!--分叶-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page=currentPage
            :page-sizes="pageSizes"
            :page-size=pageSize
            layout="total, sizes, prev, pager, next, jumper"
            :total=total>
    </el-pagination>

</div>
</body>
<!--引入vue-->
<script src="/js/vue.js"></script>
<!-- 引入组件element-ui库 -->
<script src="/js/index.js"></script>
<!--引入axios库-->
<script src="/js/axios.min.js"></script>
<script>

    var app = new Vue({
        el: "#app",
        data: function () {
            return {
                pageSizes:[1,2,3,4,5,6,7,8,9],
                currentPage: 1,
                pageSize: 5,
                total:0,
                tableData: [],
                searchForm: {},
                form: {},
                title: "",
                dialogFormVisible: false,
                dialogFormVisible1: false,
                dialogFormVisible2: false,
                cateDate: [],
                tableData1: [],
                multipleSelection:[],
                addCount:"",
                lists:[],
                state:"",
                haha:{}
            }
        },
        created: function () { //初始化方法 类似于jquery  $({})
            this.loadData();
        },
        methods: {
            //定义所有元素绑定的方法
            loadData() {
                //让_this等于当前vue对象
                var _this = this;
                //赋值 axios官网代码
                axios.post('/check/listAllCheckinfo', {
                    pageNum: this.currentPage,
                    pageSize: this.pageSize,
                    data: this.searchForm
                })  //指定请求的url及参数  get
                    .then(function (response) {  //正确返回对象的处理
                        // handle success
                        console.log(response);
                        //JSON.stringify   把json转换为json字符串，方便查看
                        console.log(JSON.stringify(response));
                        //直接使用this 会指 axios对象  错误
                        // this.tableData
                        //判断返回值是否正确
                        if (response.data.code == 200) {
                            _this.tableData = response.data.data.list;
                            _this.total = response.data.data.total;
                        }


                    })
                    .catch(function (error) {//错误的处理
                        // handle error
                        console.log(error);
                    })
                    .then(function () {//总执行 最终处理      类似java  异常处理的finally
                        // always executed
                    });
            },
            //每页数量发生变化执行方法
            handleSizeChange(val) {
                this.pageSize = val;
                //再次请求，加载数据
                this.loadData();
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                //再次请求，加载数据
                this.loadData();
            },
            search() {
                //直接调用重新请求，加载数据方法
                this.loadData();
            },
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            state1(id,states){
                this.haha.checkId=id;
                this.haha.state=states;
                axios.post('/check/updateState',this.haha)
                    .then(function (response) {
                        if (response.data.data==1) {
                            app.$message({message: '操作成功',type: 'success'});
                            app.loadData();
                        }else {
                            app.$message.error('操作失败');
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }

        }

    })
</script>
</html>